{layout name="layout" /}

<div class="layui-form" id="menu_add"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-bg-gray" style="padding: 30px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">权限管理 ：<em>{$RootGroupData.root_group_name}</em></div>
                    <div class="layui-card-body">
                        <div id="authList" class="demo-tree-more"></div>
                        <hr>
                        <div class="layui-btn-container">
                            <button type="button" class="layui-btn layui-btn-sm" lay-button="getChecked">确认提交</button>
                            <button type="button" class="layui-btn layui-btn-sm" lay-button="goBack">返回</button>
<!--                            <button type="button" class="layui-btn layui-btn-sm" lay-button="setChecked">勾选指定节点</button>-->
<!--                            <button type="button" class="layui-btn layui-btn-sm" lay-button="reload">重载实例</button>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</div>
<script>

    function flattern(data) {
        return data.reduce((iter, val) => {
            if (val.isCheck) iter.push(val.id);
            return val.children ? [...iter, ...flattern(val.children)] : iter;
        }, []);
    }
    layui.use(['tree', 'util'], function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util

            //模拟数据
            // ,data = [{
            //     title: '一级1'
            //     ,id: 1
            //     ,field: 'name1'
            //     ,checked: true
            //     ,spread: true
            //     ,children: [{
            //         title: '二级1-1 可允许跳转'
            //         ,id: 3
            //         ,field: 'name11'
            //         ,href: 'https://www.layuion.com/'
            //         },{
            //         title: '二级1-2'
            //         ,id: 4
            //         ,spread: true
            //         ,
            //         },{
            //         title: '二级1-3'
            //         ,id: 20
            //         ,field: ''
            //     }]
            // }]
            ,data = {$MenuListData|raw}

        //基本演示
        tree.render({
            elem: '#authList'
            ,data: data
            ,showCheckbox: true  //是否显示复选框
            ,id: 'authListId'
            ,isJump: true //是否允许点击节点时弹出新窗口跳转
            ,click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });

        //按钮事件
        util.event('lay-button', {
            getChecked: function(othis){
                var checkedData = tree.getChecked('authListId'); //获取选中节点的数据
                //console.log(checkedData)
                //递归获取选中的id，但必须是多维数组中最底层的id且不要父id
                var result_all =[]
                var result = []
                    getId = checkedData => {
                        checkedData.forEach(v => {
                            if(v.children.length === 0){
                                result.push(v.id);
                            }
                            result_all.push(v.id);
                            if (v.children instanceof Array) {
                                getId(v.children)
                            }
                        });
                    }
                getId(checkedData);
                console.log(result)
                var checkedDataIds = result.toString();
                var checkedDataIdsAll = result_all.toString();

                var editData = {
                        'id':{$RootGroupData['id']},
                        'allow_menu_id':checkedDataIds
                    };
                var editDataAdd = {
                    'promise_menu_id':checkedDataIdsAll
                    };


                $.extend(editData,editDataAdd)
                var editArray = [editData]
                console.log(editArray);
                //调用修改权重接口
                $.ajax({
                    url: "/admin/root_group/editList",
                    type: "POST",
                    data:{
                        'editArray':editArray,
                    },
                    dataType: "json",
                    success: function(result){
                        console.log(result)
                        if(result.code === 0){
                            layer.msg(result.msg);
                        }
                    },
                    error:function(err){
                        console.log(err.statusText);
                    }
                });
                console.log(checkedData);
            }
            ,setChecked: function(){
                tree.setChecked('demoId1', [12, 16]); //勾选指定节点
            }
            ,reload: function(){
                //重载实例
                tree.reload('demoId1', {

                });

            }
            ,goBack: function(){
                window.location='/admin/root_group/index'
            }
        });

    });
</script>